<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item required label="产品组" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spart">
              <a-input v-model="model.spart" placeholder="请输入产品组"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item required label="销售组织" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="vkorg">
              <a-input v-model="model.vkorg" placeholder="请输入销售组织"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              required
              label="是否寄售转购货"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="isPurchase"
            >
              <a-radio-group v-model="model.isPurchase">
                <a-radio :value="0">否</a-radio>
                <a-radio :value="1">是</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              required
              label="医院编码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="hospitalId"
            >
              <a-input v-model="model.hospitalId" placeholder="请输入医院编码"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="医生姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="doctorName">
              <a-input v-model="model.doctorName" placeholder="请输入医生姓名"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              required
              label="平台代理商编码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="kunnr2"
            >
              <a-input v-model="model.kunnr2" placeholder="请输入平台代理商编码"></a-input>
            </a-form-model-item>
          </a-col>
          <a-button v-if="formType == 1" type="primary" @click="addUser">添加明细表</a-button>
          <a-col :span="24" v-if="formShow && !disabled">
            <a-space
              v-for="(item, index) in model.detail"
              :key="index"
              style="display: flex; margin-bottom: 8px; margin-top: 8px"
            >
              <a-date-picker v-model:value="item.addDate" value-format="YYYY-MM-DD" />
              <a-input type="number" v-model:value="item.addNum" placeholder="请输入植入数量" />
              <a-input v-model:value="item.batchNo" placeholder="请输入批号" />
              <a-input v-model:value="item.matnr" placeholder="请输入物料号" />
              <a-input v-model:value="item.operatorType" placeholder="请输入手术术式" />
              <a-input v-model:value="item.serialNo" placeholder="请输入批序号" />
              <a-button v-if="!disabled" size="small" type="primary" danger @click="removeUser(item)">删除</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <a-input-search
      v-if="disabled"
      v-model="searchKey"
      placeholder="请输入批号搜索"
      enter-button
      style="margin-bottom: 20px"
      allowClear
    />

    <a-table
      v-if="disabled"
      :columns="columns"
      rowKey="id"
      :data-source="filterData"
      :scroll="{ y: 300 }"
      :pagination="false"
    >
    </a-table>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { queryImplantDetail } from '@/api/warehouse'
export default {
  name: 'WmsCheckForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  components: {},
  data() {
    return {
      model: {
        detail: [],
      },
      title: '',
      formShow: false,
      modelDefault: {},
      formType: null,

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/wms/implant/add',
        edit: '/wms/implant/edit',
      },
      searchKey: null,
      dataSource: [],
      columns: [
        {
          title: '物料号',
          dataIndex: 'matnr',
          key: 'matnr',
          width: 120,
          customRender: function (t, r) {
            return r.matnr ? r.matnr : '-'
          },
        },
        {
          title: '批号',
          dataIndex: 'batchNo',
          key: 'batchNo',
          customRender: function (t, r) {
            return r.batchNo ? r.batchNo : '-'
          },
        },
        {
          title: '植入日期',
          dataIndex: 'addDate',
          key: 'addDate',
        },
        {
          title: '批序号',
          dataIndex: 'serialNo',
          key: 'serialNo',
          width: 180,
          customRender: function (t, r) {
            return r.serialNo ? r.serialNo : '-'
          },
        },
        {
          title: '手术术式',
          dataIndex: 'operatorType',
          key: 'operatorType',
          width: 120,
          customRender: function (t, r) {
            return r.operatorType ? r.operatorType : '-'
          },
        },
        {
          title: '植入数量',
          dataIndex: 'addNum',
          key: 'addNum',
          align: 'center',
        },
      ],
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    filterData() {
      const { dataSource, searchKey } = this
      if (searchKey) {
        return dataSource.filter((f) => f.batchNo.indexOf(searchKey) > -1)
      } else {
        return dataSource
      }
    },
    total() {
      let num = 0
      const { dataSource } = this
      dataSource.forEach((e) => {
        num += e.sums
      })
      return num
    },
  },
  created() {
    // 备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    add(formType, title) {
      if (formType == 1) {
        this.formType = formType
        this.title = title
      }
    },
    async edit(record) {
      try {
        if (record.id) {
          this.formType = 2
          const params = { id: record.id }
          const r = await queryImplantDetail(params)

          this.dataSource = r.result.detail
          // this.visible = true

          let that = this
          this.$nextTick(() => {
            that.model = r.result
            that.formShow = true
          })
        }
      } catch (_) {
        console.log(_)
      }
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally((err) => {
              that.confirmLoading = false
            })
        }
      })
    },

    removeUser(item) {
      let arr = this.model.detail
      let index = arr.indexOf(item)
      if (index !== -1) {
        arr.splice(index, 1)
        this.model.detail = arr
      }
    },
    addUser() {
      this.formShow = true
      let arr = this.model.detail
      arr.push({
        addDate: '',
        addNum: '',
        batchNo: '',
        matnr: '',
        operatorType: '',
        serialNo: '',
      })
      this.model.detail = arr
    },
  },
}
</script>
